<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<script type="text/babel">

    // 父组件
    class MyParent extends React.Component {

        constructor(props) {
            super(props);
            // 初始化状态
            this.state = {
                name: "王珂",
                work: "兽医",
            }
        }

        handleOk() {
            const name = this.refs.nameInput.value;
            const work = this.refs.workInput.value;
            console.log("name = ",name);
            console.log("work = ",work);
            this.setState({name,work});
        }

        render() {
            return (
                <div>
                    <h3>父组件</h3>
                    <div>
                            姓名：<input type="text" ref="nameInput" />
                            工作：<input type="text" ref="workInput" />
                            <button onClick={()=>{this.handleOk()}}>确认</button>
                        </div>
                    <h3>子组件</h3>
                    <MySub title={this.state.name} work={this.state.work}/>
                </div>
            )
        }
    }

    // 子组件
    class MySub extends React.Component {

        render() {
            return (
                <p>{this.props.title}:{this.props.work}</p>
            )
        }

    }


    const app = document.querySelector("#app");
    const root = ReactDOM.createRoot(app);

    root.render(<MyParent/>);